import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    FlatList,
    TouchableOpacity
} from 'react-native';
import Carousel from 'react-native-looped-carousel';

import GlobalStyles from '../../res/styles/GlobalStyles';

export default class HomeScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            header: styles.biddingProject,
            contentClass: "conditionArea"
        };
    }
    windowOnScroll() {
        let _this = this;
        window.onscroll = function () {
            //获取滚动条滚动的距离
            let h = document.body.scrollTop;
            console.log(h);
            if (h > 20) {
                this.setState({header: styles.biddingProject1});
            } else {
                this.setState({header: styles.biddingProject});
            }
        }
    };

    renderItem = (item) => {
        switch (item.index) {
            case 0:
                return <View>
                    <Carousel delay={5000} autoplay style={styles.loopImage}>
                        <Image
                            resizeMode='cover'
                            source={{
                            uri: 'http://d.hiphotos.baidu.com/image/pic/item/8326cffc1e178a82720b6461ff03738da977e838.jpg'
                        }}
                            style={styles.loopImage}></Image>
                        <Image
                            resizeMode='cover'
                            source={{
                            uri: 'http://b.hiphotos.baidu.com/image/h%3D220/sign=9e290fdd0e082838770ddb168898a964/6159252dd42a28348dcd92c952b5c9ea14cebf8d.jpg'
                        }}
                            style={styles.loopImage}></Image>
                        <Image
                            resizeMode='cover'
                            source={{
                            uri: 'http://img.bimg.126.net/photo/oM_UO94T-HaQIQLuhdULSA==/5774177672242663144.jpg'
                        }}
                            style={styles.loopImage}></Image>
                    </Carousel>
                </View>
                break
            case 1:
                return <View>
                    <View flexDirection='row' justifyContent='space-around'>
                        <TouchableOpacity>
                            <View
                                flexDirection='row'
                                alignItems='center'
                                style={{
                                padding: 8
                            }}>
                                <Image
                                    style={{
                                    width: 48,
                                    height: 48
                                }}
                                    source={require('../../res/img/ic_announce_project.png')}></Image>
                                <View>
                                    <Text style={styles.projectTitle}>发布项目</Text>
                                    <Text style={styles.projectSubTitle}>为您寻找合适的人才</Text>
                                </View>
                            </View>
                        </TouchableOpacity>
                        <View style={GlobalStyles.verticalLine}></View>
                        <TouchableOpacity>
                            <View
                                flexDirection='row'
                                alignItems='center'
                                style={{
                                padding: 8
                            }}>
                                <Image
                                    style={{
                                    width: 48,
                                    height: 48
                                }}
                                    source={require('../../res/img/ic_find_project.png')}></Image>
                                <View>
                                    <Text style={styles.projectTitle}>寻找项目</Text>
                                    <Text style={styles.projectSubTitle}>为您带来额外收入</Text>
                                </View>
                            </View>
                        </TouchableOpacity>

                    </View>
                    <View style={GlobalStyles.line}></View>
                </View>
                break;
            case 2:
                return <View>
                    <Text style={this.state.header}>——竞争中的项目——</Text>
                    <View style={GlobalStyles.line}></View>
                </View>
                break;
            case 3:
                var data = [];
                for (var i = 0; i < 100; i++) {
                    data.push({
                        key: i,
                        title: i + ''
                    });
                }
                return <FlatList
                    renderItem={this._renderItem}
                    data={data}
                   ></FlatList>
                break;
        }

    }
    _renderItem = (item) => {
        var txt = '第' + item.index + '个 title=' + item.item.title;
        var bgColor = item.index % 2 == 0
            ? 'red'
            : 'blue';
        return <Text
            style={[
            {
                flex: 1,
                height: 40,
                backgroundColor: bgColor
            },
            styles.txt
        ]}>{txt}</Text>
    }
    onRefresh() {
        alert('正在刷新中.... ');
    }

    render() {
        var data = [];
        for (var i = 0; i < 4; i++) {
            data.push({key: i, title: i});
        }
        return (
            <View>
                <FlatList data={data} renderItem={this.renderItem}  />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    loopImage: {
        width: '100%',
        height: GlobalStyles.window_height / 16 * 3
    },
    projectTitle: {
        fontSize: 16,
        color: 'black'
    },
    projectSubTitle: {
        fontSize: 10,
        color: 'grey',
        paddingTop: 4
    },
    biddingProject: {
        fontSize: 16,
        color: 'grey',
        marginTop: 8,
        marginBottom: 8,
        textAlign: 'center'
    },
    biddingProject1: {
        position: 'relative',
        fontSize: 16,
        color: 'grey',
        marginTop: 8,
        marginBottom: 8,
        textAlign: 'center'
    }
})
